<template>
	<!-- 该页面文件已经没用，勿动 -->
	<div class="addcus-container">
		<div class="nav-bar d-flex">
			<div class="el-icon-arrow-left back" @click="close"></div>
			<div class="navtitle">新增客户</div>
		</div>
		<div class="content">
			<div class="form-info">
				<el-form ref="formRuler" label-position="top" :model="form" :rules="rules">
					<div class="com-title d-flex">
						<div class="com-title__left d-flex">
							<div class="line"></div>
							<span>客户信息</span>
						</div>
					</div>
					<template>
						<el-form-item label="所属事业部" prop="biz_id">
							<cus-select
								:filt="true"
								:List="business"
								label="biz_name"
								prop="biz_id"
								v-model="form.biz_id"
								placeholder="请选择事业部"
								@change="changeBiz"
							/>
						</el-form-item>
						<!-- <el-form-item label="分公司" prop="company_id">
							<cus-select
								:List="companylist"
								label="company_name"
								prop="company_id"
								v-model="form.company_id"
								placeholder="请选择分公司"
							/>
						</el-form-item> -->
						<el-form-item label="品牌" prop="bra_id">
							<cus-select
								:List="bizRefData.brand"
								label="bra_name"
								prop="bra_id"
								v-model="form.bra_id"
								placeholder="请选择品牌"
							/>
						</el-form-item>
						<el-form-item label="客户姓名" prop="cus_name">
							<div class="item-con d-flex">
								<el-input
									placeholder="请输入客户姓名"
									v-model="form.cus_name"
									maxlength="30"
								/>
							</div>
						</el-form-item>
						<el-form-item
							label="手机号（有预约项目时必填）"
							prop="cus_mobile"
							:required="form.has_appoint == 1"
						>
							<div class="item-con d-flex">
								<el-input
									placeholder="请输入客户手机号"
									maxlength="11"
									v-model.trim="form.cus_mobile"
								/>
							</div>
						</el-form-item>
						<el-form-item label="微信号" prop="cus_wx">
							<div class="item-con d-flex">
								<el-input
									placeholder="请输入客户微信号"
									maxlength="30"
									v-model.trim="form.cus_wx"
								/>
							</div>
						</el-form-item>
						<el-form-item
							label="预约门店（有预约项目时必填）"
							prop="dept_id"
							:required="form.has_appoint == 1"
						>
							<cus-select
								:List="shopList"
								label="dept_name"
								prop="dept_id"
								v-model="form.dept_id"
								placeholder="请选择预约门店"
							/>
						</el-form-item>
						<el-form-item
							label="加微时间（用于每日加微统计）"
							prop="wechat_join_day"
							:required="!!form.cus_wx"
						>
							<cus-time
								:filt="true"
								v-model="form.wechat_join_day"
								type="date"
								placeholder="请选择加微时间"
							/>
						</el-form-item>
						<el-form-item
							label="加微方式"
							prop="id_join_type"
							:required="!!form.cus_wx"
						>
							<cus-select
								:List="wxJoinTypeList"
								label="label"
								prop="value"
								v-model="form.id_join_type"
								placeholder="请选择加微方式"
							/>
						</el-form-item>
						<template v-if="form.id_join_type == 99">
							<el-form-item
								label="来源渠道(加微方式为其他时选择)"
								prop="source_id"
								:required="!!form.cus_wx"
							>
								<cus-select
									:List="sourceList"
									label="cname"
									prop="id"
									v-model="form.source_id"
									placeholder="请选择来源渠道"
								/>
							</el-form-item>
						</template>
						<el-form-item label="是否转介绍" prop="share_type">
							<cus-select
								:filt="true"
								:List="introduceList"
								label="label"
								prop="value"
								v-model="form.share_type"
								placeholder="请选择是否转介绍"
							/>
						</el-form-item>
						<template v-if="form.share_type != 0">
							<el-form-item label="上传图片" prop="share_data">
								<div slot="label" style="display: inline-block">客户分享凭证</div>
								<cl-upload
									multiple
									:size="50"
									:limit="3"
									:limit-size="3"
									list-type="picture-card"
									ref="uploads"
									v-model="form.share_data"
								/>
							</el-form-item>
						</template>
					</template>
					<el-form-item prop="has_appoint">
						<div class="com-title d-flex pad-top">
							<div class="com-title__left d-flex">
								<div class="line"></div>
								<span>预约信息</span>
							</div>
							<div class="com-title__right">
								<el-switch
									v-model="form.has_appoint"
									:inactive-value="0"
									:active-value="1"
									@change="hasAppointChange"
								/>
							</div>
						</div>
					</el-form-item>
					<template v-if="form.has_appoint">
						<el-form-item
							label="是否预约到店"
							prop="appoint_info.appoint_arrive"
							required
						>
							<cus-select
								:filt="true"
								:List="reservList"
								label="label"
								prop="value"
								v-model="form.appoint_info.appoint_arrive"
								placeholder="请选择是否预约到店"
							/>
						</el-form-item>
						<template v-if="form.appoint_info.appoint_arrive">
							<el-form-item label="到店时间" prop="appoint_info.appoint_date">
								<cus-time
									v-model="form.appoint_info.appoint_date"
									type="datetime"
									placeholder="请选择到店时间"
								/>
							</el-form-item>
						</template>
						<el-form-item label="预约内容" required prop="appoint_info.items">
							<div class="reserv">
								<div
									class="reserv-item d-flex"
									v-for="(item, index) in form.appoint_info.items"
									:key="index"
								>
									<div class="reserv-item__left d-flex">
										<div class="thumb">
											<!-- <img :src="item.picture_url" alt="" /> -->
											<cl-avatar :src="item.picture_url" shape="square" />
										</div>
										<div class="name eli">
											{{ item.si_name }}
										</div>
										<!-- <div class="name">￥{{ item.price }}</div> -->
										<div class="price d-flex">
											<span>￥</span>
											<input type="text" v-model="item.price" />
										</div>
									</div>
									<div
										class="reserv-item__right d-flex"
										@click="delService(index)"
									>
										<i class="el-icon-error"></i>
									</div>
								</div>
							</div>
							<div class="add-serve d-flex" @click="addService">
								<i class="el-icon-plus"></i>
								<span>添加服务</span>
							</div>
						</el-form-item>
					</template>
					<template v-if="form.has_appoint">
						<el-form-item>
							<div class="com-title d-flex pad-top">
								<div class="com-title__left d-flex">
									<div class="line"></div>
									<span>定金信息</span>
								</div>
								<div class="com-title__right">
									<el-switch
										v-model="form.appoint_info.has_deposit"
										:inactive-value="0"
										:active-value="1"
										@change="hasDepositChange"
									/>
								</div>
							</div>
						</el-form-item>
						<template v-if="form.appoint_info.has_deposit">
							<el-form-item
								label="下定金日期"
								prop="appoint_info.deposit_info.pay_date"
							>
								<cus-time
									:filt="true"
									placeholder="请选择下定金日期"
									v-model="form.appoint_info.deposit_info.pay_date"
									type="date"
								/>
							</el-form-item>
							<el-form-item
								label="付款方式"
								prop="appoint_info.deposit_info.pay_type"
							>
								<cus-select
									:List="payTypeList"
									label="label"
									prop="value"
									v-model="form.appoint_info.deposit_info.pay_type"
									placeholder="请选择支付方式"
								/>
							</el-form-item>
							<el-form-item label="定金金额" prop="appoint_info.deposit_info.money">
								<cus-select
									:List="earList"
									label="deposit"
									prop="deposit"
									v-model="form.appoint_info.deposit_info.money"
									placeholder="请选择定金金额"
								/>
								<div class="place"></div>
							</el-form-item>
						</template>
					</template>
				</el-form>
			</div>
			<el-button type="primary" class="submit" :loading="saving" @click="submit"
				>提交</el-button
			>
		</div>
		<reserv-pop
			:biz_id="form.biz_id"
			ref="reservRef"
			@changeSelect="changeSelect"
			:items="form.appoint_info.items"
		/>
	</div>
</template>

<script>
import { validate } from "@/utils/validate";
import CusSelect from "./components/cus-select";
import CusTime from "./components/cus-time";
import ReservPop from "./components/reserv-pop";
import constant from "@/constant";
import dayjs from "dayjs";
const reservlist = [
	{ label: "是", value: "1" },
	{ label: "否", value: "0" }
];
const introduce = [
	{ label: "无转介绍", value: 0 },
	{ label: "客户转介绍", value: 3 },
	{ label: "门店转介绍", value: 4 }
];
const app = document.getElementById("app");
const html = document.querySelector("html");
export default {
	components: {
		CusSelect,
		CusTime,
		ReservPop
	},
	data() {
		// 手机号
		const mobileValidator = (rule, value, callback) => {
			const { has_appoint } = this.form;
			if (!has_appoint) {
				return callback();
			}
			if (!value) {
				return callback(new Error("请填写手机号"));
			}
			return callback();
		};
		const isCusWxValidator = msg => {
			return (rule, value, callback) => {
				const { cus_wx } = this.form;
				if (!cus_wx) {
					return callback();
				}
				if (!value) {
					return callback(new Error(msg));
				}
				return callback();
			};
		};
		const deptValidator = (rule, value, callback) => {
			const { has_appoint } = this.form;
			if (!has_appoint) {
				return callback();
			}
			if (!value) {
				callback(new Error("请选择门店"));
			}
			return callback();
		};
		return {
			wxJoinTypeList: constant.WX_JOIN_TYPE,
			payTypeList: constant.PAY_TYPE,
			form: {
				biz_id: "",
				// company_id: "",
				bra_id: "",
				cus_name: "",
				cus_mobile: "",
				cus_wx: "",
				dept_id: "",
				wechat_join_day: dayjs().format("YYYY-MM-DD"),
				id_join_type: "",
				share_type: 0,
				source_id: "",
				has_appoint: 1,
				share_data: "",
				appoint_info: {
					appoint_arrive: 0,
					appoint_date: "",
					has_deposit: 1,
					items: [],
					deposit_info: {
						pay_date: dayjs().format("YYYY-MM-DD"),
						pay_type: "",
						money: "",
						deposit_num: ""
					}
				}
			},
			rules: {
				biz_id: [{ required: true, message: "请选择事业部" }],
				company_id: [{ required: true, message: "请选择分公司" }],
				bra_id: [{ required: true, message: "请选择品牌" }],
				cus_name: [{ required: true, message: "请填写客户名" }],
				cus_mobile: [
					{ required: false, message: "请填写手机号" },
					{ validator: mobileValidator },
					{ pattern: validate.mobile, message: "手机号格式不正确" }
				],
				cus_wx: [
					{ required: true, message: "请填写客户微信号" },
					// { min: 6, max: 30, message: "微信号6-30个字数" },
					// { pattern: validate.wechat, message: "格式为字母、下划线或减号，以字母开头" }
				],
				dept_id: [{ validator: deptValidator }],
				wechat_join_day: [
					{ required: false, message: "请选择加微时间" },
					{ validator: isCusWxValidator("请选择加微时间") }
				],
				id_join_type: [
					{ required: false, message: "请选择加微方式" },
					{ validator: isCusWxValidator("请选择加微方式") }
				],
				share_type: [{ required: true, message: "请选择是否转介绍" }],
				source_id: [
					{ required: false, message: "请选择来源渠道" },
					{ validator: isCusWxValidator("请选择来源渠道") }
				],
				"appoint_info.appoint_date": [
					{ required: true, message: "请选择预约到店日期时间" }
				],
				"appoint_info.items": [{ required: true, message: "请选择待做服务" }],
				"appoint_info.deposit_info.pay_date": [
					{ required: true, message: "请选择下定金日期" }
				],
				"appoint_info.deposit_info.pay_type": [
					{ required: true, message: "请选择付款方式" }
				],
				"appoint_info.deposit_info.money": [{ required: true, message: "请选择定金金额" }],
				share_data: [{ required: true, message: "请上传客户凭证" }]
			},
			// companylist: [],
			brandList: [],
			sourceList: [],
			earList: [],
			reservList: reservlist,
			introduceList: introduce,
			saving: false,
			backPath: ""
		};
	},
	computed: {
		bizRefData() {
			const { biz_id } = this.form;
			return this.getBizRefData(biz_id);
		},
		shopList() {
			const { shop_childs } = this.bizRefData;
			return shop_childs
				.filter(v => v.bus_state == 1)
				.map(v => ({
					...v,
					dept_name: `${v.dept_name} (${this.$constFilter(v.ctype, "CTYPE_LIST")})`
				}));
		}
	},
	methods: {
		//添加服务
		addService() {
			this.$refs.reservRef.open();
		},
		//服务列表
		changeSelect(list) {
			this.form.appoint_info.items = list;
		},
		//删除服务
		delService(idx) {
			this.form.appoint_info.items.splice(idx, 1);
		},
		//提交
		submit() {
			this.$refs.formRuler.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				const { appoint_info, ...args } = this.form;
				const { items } = appoint_info;
				let isEmpty = items.some(item => item.price == "");
				if (isEmpty) {
					this.$message.warning("您有未补充服务信息");
					return;
				}
				this.saving = true;
				let form = {
					...args,
					appoint_info: {
						...appoint_info,
						items: items.map(v => ({
							prod_id: v.si_id,
							prod_name: v.si_name,
							unit_price: v.price,
							buy_num: 1,
							is_experience: v.is_experience,
							is_presents: v.is_presents
						}))
					}
				};
				if (args.has_appoint && appoint_info.has_deposit) {
					let deposit = this.earList.find(
						v => v.deposit == appoint_info.deposit_info.money
					);
					form.appoint_info.deposit_info.deposit_num = deposit.deposit_num;
				}
				await this.$service.customer.add(form).done(() => {
					this.saving = false;
				});
				this.$store.commit("common/SET_CUS_FORM_SUBMIT", true);
				this.$message.success("操作成功");
				this.close();
			});
		},
		close() {
			this.reset();
			app.style.minWidth = "1300px";
			html.style = "";
			if (this.backPath) {
				this.$router.replace({
					path: this.backPath
				});
			} else {
				this.$router.replace({
					path: "/"
				});
			}
		},
		reset() {
			this.$refs.formRuler.resetFields();
			this.form.appoint_info.items = [];
		},
		validField(field) {
			this.$refs.formRuler.validateField(field);
		},
		initData() {
			this.changeBiz();
		},
		//切换事业部
		changeBiz() {
			// this.getCompanys();
			this.getBrand();
			this.getShops();
			this.getSource();
			this.getDeposits();
		},
		// 分公司
		// async getCompanys() {
		// 	const { biz_id } = this.form;
		// 	this.companylist = [];
		// 	if (!biz_id) return;
		// 	const data = await this.$service.company.list({
		// 		biz_id
		// 	});
		// 	this.companylist = data;
		// },
		//获取品牌
		async getBrand() {
			const { biz_id } = this.form;
			await this.getBizRefBrand(biz_id);
		},
		//获取门店
		async getShops() {
			const { biz_id } = this.form;
			await this.getBizRefShop(biz_id);
		},
		//获取来源渠道
		async getSource() {
			const { biz_id } = this.form;
			this.sourceList = [];
			if (!biz_id) return;
			const data = await this.$service.source.list({ biz_id, type: 2, status: 1 });
			this.sourceList = data;
		},
		// 获取定金配置
		async getDeposits() {
			const { biz_id } = this.form;
			this.earList = [];
			if (!biz_id) return;
			const list = await this.$service.config.depositList({ biz_id });
			this.earList = list ?? [];
		},
		hasAppointChange() {
			this.form.appoint_info = {
				appoint_arrive: 0,
				appoint_date: "",
				has_deposit: 1,
				items: [],
				deposit_info: {
					pay_date: dayjs().format("YYYY-MM-DD"),
					pay_type: "",
					money: "",
					deposit_num: ""
				}
			};
		},
		hasDepositChange(v) {
			this.form.appoint_info.deposit_info = {
				pay_date: dayjs().format("YYYY-MM-DD"),
				pay_type: "",
				money: "",
				deposit_num: ""
			};
		},
		setFontSize() {
			var _self = this;
			_self.width = 750;
			_self.fontSize = 100;
			_self.widthProportion = function() {
				var p =
					((document.body && document.getElementsByTagName("html")[0].offsetWidth) ||
						document.getElementsByTagName("html")[0].offsetWidth) / _self.width;
				return p > 1 ? 1 : p < 0.426 ? 0.426 : p;
			};
			_self.changePage = function() {
				document
					.getElementsByTagName("html")[0]
					.setAttribute(
						"style",
						"font-size:" + _self.widthProportion() * _self.fontSize + "px !important"
					);
			};
			_self.changePage();
			window.addEventListener(
				"resize",
				function() {
					_self.changePage();
				},
				false
			);
			app.style.minWidth = "7.5rem";
		}
	},
	created() {
		this.setFontSize();
		this.form.biz_id = this.getCurrBiz();
		this.changeBiz();
	},
	beforeRouteEnter(to, from, next) {
		next(vm => {
			vm.backPath = from.path;
		});
	}
};
</script>

<style lang="scss" scoped>
div {
	box-sizing: border-box;
}
.d-flex {
	display: flex;
}
.addcus-container {
	width: 7.5rem;
	height: 100%;
	overflow: auto;
	margin: 0 auto;
	background: #f3f3f3;
	&::-webkit-scrollbar {
		display: none;
	}
	.nav-bar {
		width: 100%;
		height: 0.88rem;
		background: #fff;
		position: fixed;
		top: 0;
		left: 0;
		align-items: center;
		padding: 0 0.3rem;
		z-index: 99;
		.back {
			width: 0.3rem;
			height: 0.3rem;
			font-size: 0.36rem;
			color: #333;
			font-weight: bold;
		}
		.navtitle {
			flex: 1;
			font-size: 0.32rem;
			font-weight: bold;
			text-align: center;
			color: #333333;
			padding-right: 0.3rem;
		}
	}
	.content {
		width: 100%;
		padding: 0.88rem 0 0.3rem;
		.com-title {
			padding: 0 0.3rem;
			height: 1rem;
			justify-content: space-between;
			align-items: center;
			background: #f3f3f3;
			&__left {
				align-items: center;
				.line {
					width: 0.04rem;
					height: 0.3rem;
					background: #156DFF;
				}
				span {
					font-size: 0.32rem;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					text-align: left;
					color: #156DFF;
					margin-left: 0.2rem;
				}
			}
			// &__right {
			// }
		}
		.pad-top {
			padding-top: 0.3rem;
			height: 1.3rem;
			margin-top: 0.3rem;
			position: relative;
			z-index: 9;
			width: 7.5rem;
			left: -0.3rem;
		}
		.form-info {
			// padding: 0 0 0.001px;
			background: #fff;
			.item-con {
				align-items: center;
				padding-bottom: 0.2rem;
				border-bottom: 1px solid #dfdfdf;
				.icon {
					color: #999;
				}
			}
			.place {
				height: 0.3rem;
			}
			.reserv {
				.reserv-item {
					justify-content: space-between;
					border-bottom: 1px solid #dfdfdf;
					padding-bottom: 0.3rem;
					margin-bottom: 0.3rem;
					&__left {
						flex: 1;
						align-items: center;
						.thumb {
							width: 0.88rem;
							height: 0.88rem;
							margin-right: 0.3rem;
							img {
								width: 100%;
								height: 100%;
								object-fit: cover;
							}
						}
						.name {
							width: 35%;
							font-size: 0.28rem;
							font-weight: 400;
							color: #333333;
							// &.mar-r {
							// 	margin-right: 0.99rem;
							// }
						}
						.price {
							border: 1px solid #dfdfdf;
							width: max-content;
							align-items: center;
							padding-left: 0.2rem;
							span {
								font-size: 0.28rem;
								font-weight: 400;
								color: #333333;
							}
							input {
								border: 0;
								width: 1.5rem;
							}
						}
					}
					&__right {
						align-items: center;
						i {
							font-size: 0.38rem;
							color: #dfdfdf;
						}
					}
				}
			}
			.add-serve {
				width: 3rem;
				height: 0.72rem;
				background: #156DFF;
				border-radius: 0.04rem;
				font-size: 0.24rem;
				color: #fff;
				justify-content: center;
				align-items: center;
				margin: 0 auto;
				span {
					font-weight: 400;
				}
				i {
					font-weight: bold;
					margin-right: 0.2rem;
				}
			}
		}
		.submit {
			display: block;
			width: calc(100% - 0.6rem);
			height: 0.88rem;
			border-radius: 0.08rem;
			font-size: 0.3rem;
			font-weight: 400;
			text-align: center;
			color: #ffffff;
			margin: 1rem auto 0;
		}
	}
}
.eli {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
::v-deep {
	.el-input--mini .el-input__inner {
		border: 0 !important;
		padding: 0 !important;
	}
	.el-form-item {
		padding: 0 0.3rem !important;
		margin-bottom: 0 !important;
	}
	.el-upload--picture-card {
		width: 1.6rem;
		height: 1.6rem;
	}
	.el-upload {
		width: 1.6rem;
		height: 1.6rem;
		line-height: 1.6rem;
	}
	.el-upload--picture-card i {
		font-size: 0.35rem;
	}
	.cl-upload__text {
		font-size: 0.24rem;
	}
	.el-upload-list__item.is-success .el-upload-list__item-status-label {
		display: none;
	}
	.el-upload-list--picture-card .el-upload-list__item {
		width: 1.6rem;
		height: 1.6rem;
		line-height: 1.6rem;
	}
	.el-upload-list--picture-card .el-upload-list__item-thumbnail {
		width: 1.6rem;
		height: 1.6rem;
		line-height: 1.6rem;
	}
}
</style>
